<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="~css/wojilu.common.css?v=#{cssVersion}" rel="stylesheet" type="text/css" />
    <link href="~css/wojilu.cms.css?v=#{cssVersion}" rel="stylesheet" type="text/css" />
    <link href="~css/themes/icon.css?v=#{cssVersion}" rel="stylesheet" type="text/css" />
    <link href="~css/themes/default/easyui.css?v=#{cssVersion}" rel="stylesheet" type="text/css" />
    <link href="~css/common.css?v=#{cssVersion}" rel="stylesheet" type="text/css" />
    
    <script src="~js/jquery-1.7.1.min.js?v=#{jsVersion}" type="text/javascript"></script>

    <script src="~js/jquery.easyui.min.js?v=#{jsVersion}" type="text/javascript"></script>

    <script src="~js/wojilu.common.js?v=#{jsVersion}" type="text/javascript"></script>

    <script src="~js/wojilu.common.admin.js?v=#{jsVersion}" type="text/javascript"></script>

    <script src="~js/common.js?v=#{jsVersion}" type="text/javascript"></script>

    <script>
        $(function() {
            var dgID = "test";
            var dg = $('#' + dgID);
            var lastIndex;
            dg.datagrid({
                title: 'My DataGrid',
                iconCls: 'icon-save',
                nowrap: false,
                striped: true,
                singleSelect:true,
                collapsible: true,
                url: '#{jsonGetURL}',
                sortName: 'Title',
                sortOrder: 'desc',
                remoteSort: false,
                idField: 'Id',
                frozenColumns: [[
	                { field: 'ck', checkbox: true }
				]],
                columns: [#{jsonColumns}],
                pagination: true,
                pageSize: 1,
                pageList: [1, 20, 50],
                rownumbers: true,
                toolbar: [{
                    id: 'btnadd',
                    text: 'Add',
                    iconCls: 'icon-add',
                    handler: function() {
                        dg.datagrid('endEdit', lastIndex);
                        dg.datagrid('appendRow', {
                           #{jsonAppendRow}
                        });
                        lastIndex = dg.datagrid('getRows').length - 1;
                        dg.datagrid('selectRow', lastIndex);
                        dg.datagrid('beginEdit', lastIndex);
                    }
                }, {
                    text: 'delete',
                    iconCls: 'icon-remove',
                    handler: function() {
                        var row = dg.datagrid('getSelected');
                        if (row) {
                            var index = dg.datagrid('getRowIndex', row);
                            dg.datagrid('deleteRow', index);
                        }
                    }
                }, '-', {
                    id: 'btnsave',
                    text: 'Save',
                    disabled: false,
                    iconCls: 'icon-save',
                    handler: function() {
                        dg.datagrid('endEdit', lastIndex);
                        SubmitChange(dgID, '#{jsonPostURL}');
                    } }],
                    onHeaderContextMenu: function(e, field) {
                        e.preventDefault();
                        if (!$('#tmenu').length) {
                            createColumnMenu(dgID);
                        }
                        $('#tmenu').menu('show', {
                            left: e.pageX,
                            top: e.pageY
                        });
                    },
                    onClickRow: function(rowIndex) {
                        if (lastIndex != rowIndex) {
                            dg.datagrid('endEdit', lastIndex);
                            dg.datagrid('beginEdit', rowIndex);
                        }
                        lastIndex = rowIndex;
                    }

                });

            });

            function createColumnMenu(dgID) {
                var tmenu = $('<div id="tmenu" style="width:100px;"></div>').appendTo('body');
                var fields = $('#' + dgID).datagrid('getColumnFields');
                for (var i = 0; i < fields.length; i++) {
                    $('<div iconCls="icon-ok"/>').html(fields[i]).appendTo(tmenu);
                }
                tmenu.menu({
                    onClick: function(item) {
                        if (item.iconCls == 'icon-ok') {
                            $('#' + dgID).datagrid('hideColumn', item.text);
                            tmenu.menu('setIcon', {
                                target: item.target,
                                iconCls: 'icon-empty'
                            });
                        } else {
                            $('#' + dgID).datagrid('showColumn', item.text);
                            tmenu.menu('setIcon', {
                                target: item.target,
                                iconCls: 'icon-ok'
                            });
                        }
                    }
                });
            }
    </script>

</head>
<body>
    <h2>
        Complex DataGrid</h2>
     <table id="test">
    </table>
</body>
</html>
